<template>
  <div class="zhuye">
    <div class="banner">
      <!-- 热点轮播图 -->
      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <a href="/details"><img src="../../public/image/slider-1.jpg" class="d-block w-100" alt="..."
                height="780px" /></a>
            <div class="carousel-caption d-none d-md-block">
              <p class="animated fadeInDownBig">新会员可享受20%的折扣</p>
              <h1 class="animated bounceIn">母亲节快乐</h1>
              <p class="animated fadeInUpBig xm">妈妈会喜欢的花束</p>
              <a href="/products"><button class="animated bounceInLeft btn">开始购物</button></a>
            </div>
          </div>
          <div class="carousel-item">
            <a href="details"><img src="../../public/image/slider-2.jpg" class="d-block w-100" alt="..."
                height="780px" /></a>
            <div class="carousel-caption d-none d-md-block">
              <p class="animated fadeInDownBig">新会员可享受20%的折扣</p>
              <h1 class="animated bounceIn">您的特殊日子</h1>
              <p class="animated fadeInUpBig xm">我们在这里度过您的特殊日子</p>
              <a href="/products"><button class="animated bounceInLeft btn">开始购物</button></a>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon icon50" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        <!-- 波浪特效 -->
        <div id="banner_wave_1"></div>
        <div id="banner_wave_2"></div>
      </div>
    </div>
    <div class="container">
      <div class="box">
        <div class="pic-4">
          <div v-for="(item, index) in icon4" :key="index" class="zy-bt4">
            <img :src="item.img" alt="" width="70px" height="70px" />
            <div class="pic-right">
              <h5>{{ item.name }}</h5>
              <p>{{ item.p1 }}</p>
            </div>
          </div>
        </div>
        <div class="zy-bt">
          <h2>新产品</h2>
          <p>
            创造力，能量，沟通，幸福和爱的完美结合。让我们为您安排一个微笑。.
          </p>
        </div>

        <!-- 轮播图 -->
        <div class="zy-rbt">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in pro" :key="index" style="width: 271px; height: 441px">
                <router-link to="/details" class="icon-33" @click.native="shopcar(item.img,item.name,item.price)"><img
                    :src="item.img" alt="" width="271px" height="339px" /></router-link>
                <div id="zy-lbt">
                  <p>
                    <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                      class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                    <i class="iconfont icon-xing icon-ora"></i>
                  </p>
                  <p class="zy-p14" @click="sop(item.img,item.name,item.price)">{{ item.name }}</p>
                  <p @click="s()">123456</p>
                  <p class="zy-red">
                    {{ item.price }}
                    <span class="zy-del">{{ item.delect }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 更多细节模块 -->
      <div class="zy-more">
        <div class="center">
          <img src="../../public/picture/about.jpg" alt="" width="576px" height="373px" />
          <div class="more-right">
            <h2>惊喜你的情人！让我们为她安排一个微笑</h2>
            <p>
              在哪里花是我们创造持久回忆的灵感。无论在什么场合激发创造持久记忆的灵感
            </p>
            <ul>
              <li>专为您挑选的手</li>
              <li>专为您挑选的手。手只为。</li>
              <li>专为您挑选的手</li>
            </ul>
            <button>更多细节</button>
          </div>
        </div>
      </div>
      <div class="zy-center">
        <div class="zy-bt">
          <h2>特色物品</h2>
          <p>
            创造力，能量，沟通，幸福和爱的完美结合。让我们为您安排一个微笑。.
          </p>
        </div>
        <div class="zy-san">
          <div class="swiper1-container">
            <div class="swiper1-wrapper">
              <div class="swiper1-slide" v-for="(item, index) in pro1" :key="index" style="width: 271px; height: 441px">
                <div class="pro-icon4 animated fadeInRight">
                  <div><i class="iconfont icon-shangpindaizi icon4"></i></div>
                  <div><i class="iconfont icon-iconbijiao icon4"></i></div>
                  <div><i class="iconfont icon-xinaixin icon4"></i></div>
                  <div><i class="iconfont icon-yanjing icon4" data-toggle="modal" data-target="#exampleModal"
                      @click="sop(item.img,item.name,item.price,item.id)"></i></div>
                </div>
                <router-link to="/details" @click.native="shopcar(item.img,item.name,item.price)"><img :src="item.img"
                    alt="" width="271px" height="339px" /></router-link>
                <div id="zy-lbt">
                  <p>
                    <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                      class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                    <i class="iconfont icon-xing icon-ora"></i>
                  </p>
                  <p class="zy-p14">{{ item.name }}</p>
                  <p class="zy-red">
                    {{ item.price }}
                    <span class="zy-del">{{ item.delect }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper1-container">
            <div class="swiper1-wrapper">
              <div class="swiper1-slide" v-for="(item, index) in pro1" :key="index" style="width: 271px; height: 441px">
                <div class="pro-icon4 animated fadeInRight">
                  <div><i class="iconfont icon-shangpindaizi icon4"></i></div>
                  <div><i class="iconfont icon-iconbijiao icon4"></i></div>
                  <div><i class="iconfont icon-xinaixin icon4"></i></div>
                  <div><i class="iconfont icon-yanjing icon4" data-toggle="modal" data-target="#exampleModal"
                      @click="sop(item.img,item.name,item.price,item.id)"></i></div>
                </div>
                <router-link to="/details" @click.native="shopcar(item.img,item.name,item.price)"> <img :src="item.img"
                    alt="" width="271px" height="339px" /></router-link>
                <div id="zy-lbt">
                  <p>
                    <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                      class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                    <i class="iconfont icon-xing icon-ora"></i>
                  </p>
                  <p class="zy-p14">{{ item.name }}</p>
                  <p class="zy-red">
                    {{ item.price }}
                    <span class="zy-del">{{ item.delect }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="zj">
      <div v-for="(item, index) in zj" :key="index">
        <img :src="item.img" width="276px" height="276px" alt="" />
        <p class="zj-name">{{ item.name }}</p>
        <p>{{ item.pro }}</p>
      </div>
    </div>
    <!-- 博客模块 -->
    <div class="zy-boke">
      <div class="zy-bt">
        <h2>我们的博客</h2>
        <p>创造力，能量，沟通，幸福和爱的完美结合。让我们为您安排一个微笑。.</p>
      </div>
      <div class="content-boke">
        <div class="boke-left" v-for="(item, index) of arctile2" :key="index">
          <img :src="item.image" alt="boke" width="372px" height="223.2px" />
          <div class="boke-nr">
            <h4>{{ item.bt }}</h4>
            <p class="boke-red">
              <span style="color: #000000; font-size: 13px">由</span>{{ item.group }}
            </p>
            <p class="boke-zz">{{ item.zz }}</p>
            <hr />
            <div class="boke-read">
              <router-link to="/">继续阅读</router-link>
              <span><i class="iconfont icon-duihaoqipao2"> </i>0</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div>
              <img :src="mtkimg" alt="" width="437px" height="546px" :title="sopid">
            </div>
            <div>
              <div class="shopping-left">
                <h3>{{sopName}}</h3>
                <div class="sop-price">
                  <span class="price">{{'￥'+sopPrice}}</span>
                  <span class="del">$29.00</span>
                  <span class="yl">-34%</span>
                </div>
                <p class="color-666">
                  <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                    class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                  <i class="iconfont icon-xing icon-ora"></i>
                  无评论
                </p>
              </div>
              <p>
                紫色玫瑰代表成熟的爱，当你的男友向你奉上紫色玫瑰，就表示他想与你共同演绎与童话似的故事--
                王子和公主历尽磨难终于喜结良缘；紫色玫瑰代表你的幸福比我的重要，如果有个男人要送你紫色玫瑰的时候你不要拒绝，
                因为那个人是可以陪你一生的人。
              </p>
              <div class="scn">
                <div class="num">
                  <div class="tj">
                    <button @click="subtract">-</button>
                    <input type="text" v-model.number="num" value="1" oninput="value=value.replace(/[^\d]|^[0]/g,'')">
                    <button @click="add">+</button>
                  </div>
                  <!-- <router-link to='/shop'> -->
                  <button class="addto" @click="scar(mtkimg,sopName,sopPrice,num,sopid)" data-dismiss="modal">
                    添加到购物车
                  </button>
                  <!-- </router-link> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="box-prompt">
      成功加入购物车!
    </div>
  </div>
</template>

<style lang="less" scoped>
  // 公共样式
  // input nuber去掉上下箭头
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  button,
  input {
    border: none;
    outline: none;
  }

  a {
    text-decoration: none;
  }

  .icon-33 {
    color: #333333 !important;
  }

  .icon-ora {
    color: #FF9800;
    font-size: 13px;
    margin: 0 2px;
  }

  // 提示框
  .box-prompt {
    display: none;
    text-align: center;
    line-height: 50px;
    position: fixed;
    top: 110px;
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    color: #fff;
    width: 200px;
    height: 50px;
    background-color: #FF8000;
  }

  //---------------
  // 波浪线
  #banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://view.amogu.cn/images/2020/08/30/wave_1.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 5;
    opacity: 1;
    // transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  #banner_wave_2 {
    width: auto;
    height: 80px;
    background: url(https://view.amogu.cn/images/2020/08/30/wave_2.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: 0;
    z-index: 4;
    opacity: 1;
    // transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 160s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }


  /* 没做浏览器适配，具体哪些浏览器会生效未知，反正Chrome没什么问题。*/

  @keyframes move1 {
    100% {
      background-position: 100% 0;
    }
  }

  @keyframes move2 {
    100% {
      background-position: -100% 0;
    }
  }

  .pro-icon4 {
    z-index: 60;
    display: none;
    width: 45px;
    height: 204px;
    position: absolute;
    top: 10px;
    right: 10px;

    div {
      background-color: white;
      width: 45px;
      height: 45px;
      margin-bottom: 6px;
      border-radius: 50%;
      text-align: center;
      line-height: 46px;

      .icon4 {
        font-size: 18px;

        &:hover {
          color: #f34f3f;
        }
      }
    }
  }

  // swiper轮播图模块
  .swiper-container {
    width: 100%;
    height: auto;
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
  }

  .icon-ora {
    color: #FF9800;
    font-size: 13px;
    margin: 0 2px;
  }

  .zy-p14 {
    margin-top: 5px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    text-transform: capitalize;
    color: #222222;
    transition: all 0.3s linear;
    font-family: "Rubik", sans-serif;
  }

  .zy-red {
    margin-top: 5px;
    font-weight: 500;
    font-size: 15px;
    color: #f34f3f;
  }

  .zy-del {
    text-decoration: line-through;
    font-weight: 400;
    font-size: 12px;
    margin-left: 5px;
    color: #666666;
  }

  // 热点图
  .banner {
    text-align: left;

    .carousel-caption {
      text-align: left;
      color: black;
      position: absolute;
      top: 20%;
      left: 10%;
      z-index: 10;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #fff;
      text-align: center;
    }

    h1 {
      text-align: left;
      color: #323232;
      font-size: 63px;
    }

    p {
      text-align: left;
      color: #000;
    }

    .xm {
      font-size: 24px;
    }

    .btn {
      height: 60px;
      line-height: 58px;
      padding: 0 45px;
      font-size: 15px;
      background-color: #f34f3f;
      color: #ffffff;
      border-radius: 100px;
      position: absolute;
      left: 0;
      top: 250px;
    }
  }

  .swiper-slide {
    width: 271px !important;
    text-align: center;
    font-size: 18px;
    flex-wrap: wrap;
    background: #fff;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: all;

    &:hover .pro-icon4 {
      display: block;
    }
  }

  #progressEffect {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
  }

  .zy-bt {
    text-align: center;
    width: 1152px;
    margin: 0 auto;
    padding-top: 90px;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;

    h2 {
      margin-bottom: 22px;
      font-size: 40px;
      line-height: 48px;
      font-weight: 300;
      color: #222222;
    }
  }

  .container {
    min-height: 1500px;

    .icon50 {
      color: #f34f3f;
    }

    .box {
      text-align: center;
      width: 1180px;
      height: 701px;
      padding: 0 12px 0 12px;
      margin: 0 auto;

      // 轮播图
      .zy-rbt {
        height: 496px;
      }
    }

    .pic-4 {
      height: 170px;
      padding-top: 70px;
      display: flex;

      .zy-bt4 {
        display: flex;

        div {
          font-size: 14px;
          width: 25%;
        }

        .pic-right {
          width: 206px;
          height: 70px;
          padding-left: 15px;

          h5 {
            font-size: 14px;
            font-weight: 600;
          }

          p {
            line-height: 18px;
            font-weight: 300;
          }
        }
      }
    }

    .zy-center {
      padding: 0 12px;
      width: 1176px;
      margin: 0 auto;
      height: 1186px;
    }

    .zy-san {
      height: 942px;

      .swiper1-container {
        width: 100%;
        height: auto;
        padding-top: 29px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;

        .swiper1-wrapper {
          display: flex;
          align-items: center;
          justify-content: space-around;

          .swiper1-slide {
            position: relative;
            width: 271px !important;
            text-align: center;
            font-size: 18px;
            flex-wrap: wrap;
            background: #fff;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition-property: all;

            .pro-icon4 {
              display: none;
              width: 45px;
              height: 204px;
              position: absolute;
              top: 10px;
              right: 10px;
            }

            &:hover .pro-icon4 {
              display: block;
            }
          }

        }

      }

    }

    // more模块
    .zy-more {
      margin-top: 225px;
      clear: both;
      height: 470px;
      padding-top: 50px;
      color: #666666;

      .center {
        display: flex;
        justify-content: space-between;
        height: 419px;
        padding: 12px 0;

        .more-right {
          width: 576px;
          padding-left: 30px;

          h2 {
            font-size: 31px;
            margin-bottom: 20px;
            line-height: 39px;
            font-family: "Rubik", sans-serif;
            font-weight: 400;
          }

          p {
            margin-top: 17px;
            font-weight: 300;
          }

          ul,
          li {
            list-style: disc;
            height: 28px;
            padding-left: 30px;
            font-size: 16px;
            line-height: 1.75;
            font-style: normal;
            font-weight: 400;
            visibility: visible;
            font-family: "Rubik", sans-serif;
            color: #666666;
          }

          button {
            margin-top: 60px;
            font-size: 14px;
            font-weight: 700;
            padding: 0px 35px;
            height: 50px;
            line-height: 48px;
            border-width: 1px;
            color: white;
            background-color: #f34f3f;
            border-radius: 100px;
          }
        }
      }
    }
  }

  //博客模块
  .zy-boke {
    height: 755px;
    padding: 90px 0 100px;
    font-size: 16px;
    background-color: #f7f7f7;
    color: #666666;

    .content-boke {
      width: 1176px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;

      .boke-nr {
        padding-top: 27px;

        h4 {
          color: #222222;
          font-size: 18px;
          font-family: "Rubik", sans-serif;
          line-height: 21px;
          margin-bottom: 5px;
          font-weight: 500;
          margin-bottom: 8px;
        }

        .boke-red {
          color: #f34f3f;
          margin-bottom: 22px;
          font-size: 13px;
        }

        .boke-zz {
          height: 46px;
          padding-bottom: 21px;
          font-size: 14px;
          font-weight: 400;
        }

        .boke-read {
          color: #222222;
          display: flex;
          justify-content: space-between;
          align-items: center;

          a {
            color: #222222;
          }
        }
      }
    }
  }

  .zj {
    height: 580px;
    padding: 90px 0 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      padding: 0 12px;
      text-align: center;

      .zj-name {
        margin-top: 20px;
        font-size: 16px;
        line-height: 19px;
        font-weight: 700;
        color: #222222;
        font-family: "Rubik", sans-serif;
        margin-bottom: 0px;
      }
    }
  }
</style>
<script>
  import shop from '@/shop.js';
  export default {
    data() {
      return {
        num: 1,
        effect: 0,
        mtkimg: null,
        sopid: '',
        sopName: null,
        sopPrice: null,
        syhua: [{
          img: "picture/product-1.jpg"
        }],
        pro: [{
            img: "picture/product-1.jpg",
            name: "春天雪花",
            price: "$19",
            delect: "$29"
          },
          {
            img: "picture/product-2.jpg",
            name: "岩皂",
            price: "$50",
            delect: ""
          },
          {
            img: "picture/product-3.jpg",
            name: "猩红圣人",
            price: "$39",
            delect: "$60"
          },
          {
            img: "picture/product-4.jpg",
            name: "毛地黄花",
            price: "$79",
            delect: ""
          },
          {
            img: "picture/product-5.jpg",
            name: "夏日美味",
            price: "$40",
            delect: "$85"
          },
          {
            img: "picture/product-7.jpg",
            name: "野玫瑰",
            price: "$19",
            delect: "$21"
          },
          {
            img: "picture/product-8.jpg",
            name: "甜香雪球",
            price: "$50",
            delect: ""
          },
          {
            img: "picture/product-9.jpg",
            name: "Ity下棕榈",
            price: "$19",
            delect: "$29"
          },
          {
            img: "picture/product-6.jpg",
            name: "棕榈皇后",
            price: "$19",
            delect: "$29"
          }
        ],
        pro1: [{
            img: "picture/product-1.jpg",
            name: "春天雪花",
            price: "$19",
            delect: "$29"
          },
          {
            img: "picture/product-2.jpg",
            name: "岩皂",
            price: "$50",
            delect: ""
          },
          {
            img: "picture/product-3.jpg",
            name: "猩红圣人",
            price: "$39",
            delect: "$60"
          },
          {
            img: "picture/product-4.jpg",
            name: "毛地黄花",
            price: "$79",
            delect: ""
          },
        ],
        arctile2: [],
        icon4: [],
        yyg: [],
        zj: [],
      };
    },
    methods: {
      // 模态框功能
      sop(img, name, price, id) {
        this.mtkimg = img;
        this.sopName = name;
        this.sopPrice = price;
        this.sopid = id;
      },
      shopcar(img, name, price) {
        setTimeout(() => {
          shop.$emit('shopcar', {
            img,
            name,
            price
          })
        }, 60);
      },
      // 计算
      add() {
        this.num++;
      },
      subtract() {
        if (this.num == 0) {
          this.num = 0
        } else {
          this.num--;
        }
      },
      // 加入购物车
      scar(img, name, price, num, id) {
        console.log(img, name, price, num, id)
        var shopcar = {
          id: id,
          img: img,
          name: name,
          price: price,
          num: num
        };
        this.num = 1;
        this.$store.commit('add', shopcar);
        setTimeout(() => { //提示框
          $(".box-prompt").fadeIn()
          setTimeout(() => {
            $(".box-prompt").fadeOut()
          }, 1500);
        }, 100);

      }

    },
    mounted() {
      this.$axios.get('http://121.196.102.99:3000/home').then((res) => { //发送请求的url
          this.arctile2 = res.data.arctile2;
          this.icon4 = res.data.icon4;
          this.yyg = res.data.yyg;
          this.zj = res.data.zj;
        }) //响应回来触发的回调函数
        .catch((err) => {
          console.log(err)
        })
      //请求出现错误时回调函数 
      var swiper = new Swiper(".swiper-container", {
        loop: true,
        speed: 2500,
        slidesPerView: 7,
        spaceBetween: 30,
        centeredSlides: true,
        watchSlidesProgress: true,
        on: {
          setTranslate: function () {
            var slides = this.slides;
            for (var i = 0; i < slides.length; i++) {
              var slide = slides.eq(i);
              var progress = slides[i].progress;
              //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
              slide.css({
                opacity: "",
                background: ""
              });
              slide.transform(""); //清除样式

              if (this.effect == 1) {
                slide.transform("scale(" + (1 - Math.abs(progress) / 8) + ")");
              } else if (this.effect == 2) {
                slide.css("opacity", 1 - Math.abs(progress) / 6);
                slide.transform(
                  "translate3d(0," + Math.abs(progress) * 20 + "px, 0)"
                );
              } else if (this.effect == 3) {
                slide.transform("rotate(" + progress * 30 + "deg)");
              } else if (this.effect == 4) {
                slide.css(
                  "background",
                  "rgba(" +
                  (255 - Math.abs(progress) * 20) +
                  "," +
                  (127 + progress * 32) +
                  "," +
                  Math.abs(progress) * 64 +
                  ")"
                );
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    },
  };
</script>